@extends('home.layout.user')
@section('style')
  <style>
    #edit_box{
      margin: 20px;
    }
    #edit_content{

    }
    .upload{
    padding: 4px 10px;
    height: 20px;
    line-height: 20px;
    position: relative;
    border: 1px solid #999;
    text-decoration: none;
    color: #0af;
  }
  #form{
    width: 367px;
  }
  .change{
      position: absolute;
      overflow: hidden;
      right: 0;
      top: 0;
      opacity: 0;
  }
  #picfile{
    margin:50px;
  }

  </style>
  <link rel="stylesheet" href="/home/juse/css/publish.css" />
 <script src='/home/area.js'></script>
  <script type="text/javascript" src="/home/jquery.js"></script>
  <script type="text/javascript" src="/home/birthday.js"></script>
@endsection
@section('user')
    <link rel="stylesheet" href="/bootstrap-3.3.7-dist/css/bootstrap.min.css">  
        <div class="m_right">
          <div id="edit_box">
          <form class="form-horizontal" id="pub_content" action="/publish" method="post" enctype="multipart/form-data">
            <div id="edit_userpic" style="width:200px;height:250px; float:left">
            <img id="img1" src="{{ $userinfo['photo'] }}" alt="用户头像" style="width:200px;height:200px; float:left">
            <div id="picfile">
              <a href="javascript:;" class="upload btn ">修改头像
                  <input class="btn btn-default change" id="file_upload" name="file_upload" type="file" class="form-control" id="inputEmail3" style="width:200px;" placeholder="请选择图片">
              </a>
              {{ csrf_field() }}
            
            </div>
          </div>
          </form>
            <div id="edit_content">
              <form method="post" action="/user/{{$userinfo['id']}}" class="form-horizontal" style="float:left;width:500px;margin:0px 20px;">
                <input type="hidden" name="photo" id="photo" value="{{$userinfo['photo']}}" >
                <input type="hidden" name="_method" value="PUT">
                 {{ csrf_field() }}
                <div class="form-group">
                  <label for="inputEmail3" class="col-sm-2 control-label">用户名</label>
                  <div class="col-sm-10">
                    <input type="hidden" id="username2" value="{{$user['username']}}"> 
                    <input type="text" name="username" id='username9' value="{{$user['username']}}" class="form-control"  placeholder="请输入用户名">
                  </div>
                </div>
                <div class="form-group">
                  <label for="inputEmail3" class="col-sm-2 control-label">性别</label>
                  <div class="col-sm-10">
                    <label class="radio-inline">
                    <input type="radio" name="sex" id="inlineRadio1" value="1" @if($userinfo['sex']==1)checked @endif> 男
                  </label>
                  <label class="radio-inline">
                    <input type="radio" name="sex" id="inlineRadio1" value="0"  @if($userinfo['sex']==0)checked @endif> 女
                  </label>
                  </div>
                </div>
                <div class="form-group">
                  <label for="inputEmail3" class="col-sm-2 control-label">手机号</label>
                  <div class="col-sm-10">
                    <input type="text" name="phone" value="{{$user['phone']}}" class="form-control" id="phone" placeholder="请输入手机号">
                  </div>
                </div>
                <div class="form-group phonecode" style="display:none">
                  <label for="inputEmail3" class="col-sm-2 control-label"></label>
                  <div class="col-sm-10">
                    
                    &nbsp;<button class="btn btn-warning" id="code">获取验证码</button>
                    <input type="text" value="" class="form-control " id="phone_code" style="width:310px;float:left;" id="inputEmail3" placeholder="请输入验证码">
                  </div>
                </div>
                <div class="form-group">
                  <label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>
                  <div class="col-sm-10">
                    <input type="hidden"  value="{{$user['email']}}" id="remail">
                    <input type="email" value="{{$user['email']}}" name="email" class="form-control" id="email" placeholder="请输入邮箱">
                  </div>
                </div>
                <script>
                  $('#email').change(function(){
                     if ($(this).val()==$('#remail').val()) {
                        return
                      }else{
                         var preg = /@/;
                        if(!preg.test($('#email').val())){
                            $('#email').focus();
                            return layer.tips('邮箱式有误', '#email')
                            
                        }
                        $.get('/testemail?email='+$(this).val(),function(msg){
                          if(msg==1){
                            var s = $('#remail').val()
                            $('#email').val(s)
                            return layer.tips('邮箱不合法或已存在重新设置', '#email')
                          }
                        })
                      }
                  })
                </script>
                <div class="form-group">
                  <label for="inputEmail3" class="col-sm-2 control-label">生日</label>
                  <div class="col-sm-10">
                  
                    <input type="text" name="birthday" value="{{$userinfo['birthday']}}" class="form-control" id="birthday" placeholder="请输入生日(设置后不可修改)">
                    <div id="sel">
                      <select id="sel_year" class="btn" style="width: 90px" ></select>年
                      <select id="sel_month" class="btn" style="width: 70px" ></select>月
                      <select id="sel_day" class="btn" style="width: 70px" ></select>日
                      &nbsp;
                      <button class="btn btn-info" id="birth">确定</button>
                      <button class="btn btn-default" id="qxbirth">取消</button>
                   </div>

                  </div>
                </div>
                 <script>
                    $('#username9').change(function(){
                      if ($(this).val()==$('#username2').val()) {
                        return
                      }else{
                          if(msg==1){
                            var s = $('#username2').val()
                            $('#username9').val(s)
                            return layer.tips('用户名已存在重新设置', '#username9')
                          }
                        }
                      
                    })
                 // alert({{$userinfo['birthday']}})
                    if($('#birthday').val()==''){
                      $('#birthday').css('display','none')
                    }else{
                      $('#sel').css('display','none')
                    }
                    $('#qxbirth').click(function(){
                      $('#birthday').css('display','block')
                      $('#sel').css('display','none')
                      return false
                    })
                    $('#birthday').click(function(){
                      $('#birthday').css('display','none')
                      $('#sel').css('display','block')
                    })
                    $('#birth').click(function(){
                      var str = $('#sel_year').val()+'-'+$('#sel_month').val()+'-'+$('#sel_day').val()
                      $('#birthday').val(str).css('display','block')
                      $('#sel').css('display','none')
                      return false
                    })
                 </script>
                 <div class="form-group">
                  <label for="inputEmail3" class="col-sm-2 control-label">收件人</label>
                  <div class="col-sm-10">
                    <input type="text" name="nickname" id='username9' value="{{$userinfo['nickname']}}" class="form-control"  placeholder="请输入用户名">
                  </div>
                </div>
                <div class="form-group " >
                  <label for="inputEmail3" class="col-sm-2 control-label">收货地址</label>
                  <div class="col-sm-10 addr"  style="display:block;">
                    <input type="text" name="address" id="addr" value="{{$userinfo['address']}} "  class="form-control" id="inputEmail3" placeholder="Email">
                  </div>
                  <div class="col-sm-10 addr" id="address" style="display:none;">
                    <select  class="btn"id="Province" runat="server" name="province" style="width: 90px" ></select>
                    <select class="btn" id="Country" runat="server" name="country" style="width: 90px"></select>
                    <select class="btn" id="Town" runat="server" name="town" style="width: 90px"></select>
                    <button class="btn btn-info" id="querendizhi" >确认</button>
                    <button class="btn btn-default" id="dizhi" onclick="return false">取消</button>
                    <script language="javascript">
                      $('#phone_code').blur(function(){
                        $.get('/phoneCode?code='+$(this).val(),function(msg){
                          if(msg==2){
                              $('#subsub').css('cursor','not-allowed')
                            return layer.tips('请输入正确的验证码', '#phone_code')
                          }else{
                            $('#subsub').css('cursor','')
                          }
                        })
                      })
                      $('#querendizhi').click(function(){
                        var str = $('#Province').val()+'-'+$('#Country').val()+'-'+$('#Town').val();
                        $('#addr').css('display','block').val(str)  
                        $('#address').css('display','none');
                        return false                      
                      })
                      $('#addr').click(function(){
                        $(this).css('display','none');
                        $('#address').css('display','block');
                      })
                      $('#dizhi').click(function(){
                        $('#addr').css('display','block');
                        $('#address').css('display','none');
                        return false
                      })
                      $('#phone').change(function(){
                        var phoneReg = /^1[3|4|5|7|8][0-9]\d{8}$/;
                         if(!phoneReg.test($('#phone').val())){
                            $('#phone').focus();
                            return layer.tips('手机号格式有误', '#phone')
                            
                        }else if({{$user['phone']}}==$(this).val()){
                            $('.phonecode').css('display','none')
                            return false
                          }else{
                          $.ajax({
                                url : '/phone',
                                type : 'get',
                                data : {'phone':$('#phone').val(),},//这里使用json对象
                                success : function(data){
                                 if(data == 1){
                                      layer.tips('手机号已存在', '#phone')
                                     $('.phonecode').css('display','none')
                                     return false
                                    }
                                },
                          });
                        }

                        if({{$user['phone']}}==$(this).val()){
                          $('.phonecode').css('display','none')
                        }else{
                          $('.phonecode').css('display','block')
                        }
                      })
                    $('#code').click(function(){
                      $.ajax({
                        url : '/register/getverifycode',
                        type : 'get',
                        data : {'phone':$('#phone').val(),},//这里使用json对象
                        success : function(data){
                          if(data == 2){
                              layer.msg('验证码已发送');
                              // console.log(data);
                              countdown();
                                    }
                                else if(data == 1){
                              layer.msg('该手机号已存在');
                            }
                        },
                        });
                      return false
                    })
                      setup()
                     </script>
                </div>
                <br>
                <br>
                <div class="form-group">
                  <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" class="btn btn-info" id="subsub">修改</button>
                    <button type="submit" class="btn btn-default">返回</button>
                  </div>
                </div>
              </form>

            </div>
          </div>
        
            
         
        </div>
        <script type="text/javascript">
        $(function () {
            $("#file_upload").change(function () {
                uploadImage();
            });
        });

        function uploadImage() {
//          判断是否有选择上传文件
            var imgPath = $("#file_upload").val();
            if (imgPath == "") {
                alert("请选择上传图片！");
                return;
            }
            //判断上传文件的后缀名
            var strExtension = imgPath.substr(imgPath.lastIndexOf('.') + 1);
            if (strExtension != 'jpg' && strExtension != 'gif'
                && strExtension != 'png' && strExtension != 'bmp') {
                alert("请选择图片文件");
                return;
            }
//          var myform = document.getElementById('art_from');
            var formData = new FormData($('#pub_content')[0]);
            formData.append('_token', '{{csrf_token()}}');
                                        {{--console.log(formData);--}}
            $.ajax({
                type: "POST",
                url: "/publish/upload",
                data: formData,
                async: true,
                cache: false,
                contentType: false,
                processData: false,
                success: function(data) {
                                   // console.log(data);
//                                    alert("上传成功");
//                    $('#img1').attr('src','http://ovf9o4wws.bkt.clouddn.com/'+data);
//                    http://project187.oss-cn-shanghai.aliyuncs.com/uploads/201708290957357759.jpg
                   $('#img1').attr('src','/'+data);
                    $('#photo').val('/'+data);

                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    alert("上传失败，请检查网络后重试");
                }
            });

        }

    </script>
     
    
    <script>  
    $(function () {
      $.ms_DatePicker({
                YearSelector: ".sel_year",
                MonthSelector: ".sel_month",
                DaySelector: ".sel_day"
        });
      $.ms_DatePicker();
    }); 
    </script> 
@endsection
